<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>更换背景</title>
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background: url(photo/loginbg.jpg) no-repeat;
      margin:0;
      padding: 0;
      font-family: sans-serif;
      background-size: cover;
    }
    ul{
      list-style: none;
    }
    ul li{
      width: 80px;
      height: 50px;
      border: 1px solid #222;
      float: left;
      margin: 10px;
    }
    ul li img{
      width: 80px;
      height: 50px;
      cursor: pointer;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var imgs = document.getElementsByTagName("img");
      for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function(){
          document.body.style.background = "url("+this.src+") no-repeat";//通过js控制改变行内样式
          document.body.style.backgroundSize = "cover";
          var  v="url("+this.src+") no-repeat"
          $("#myurl").val(v)
        }

      }
    }
  </script>
</head>
<body>
<ul>
  <li><img src="photo/loginbg1.jpg" ></li>
  <li><img src="photo/loginbg.jpg" ></li>
  <li><img src="photo/loginbg2.png" ></li>
  <li><img src="photo/loginbg3.png" ></li>
  <li><img src="photo/loginbg4.png" ></li>
  <li><img src="photo/loginbg5.png" ></li>
  <li><img src="photo/loginbg6.png" ></li>
  <li><img src="photo/loginbg7.png" ></li>
  <li><img src="photo/loginbg8.png" ></li>
  <li><img src="photo/loginbg9.png" ></li>
  <li><img src="images/galaxy/1.jpg" ></li>
  <li><img src="images/galaxy/2.jpg" ></li>
  <li><img src="images/galaxy/3.jpg" ></li>
  <li><img src="images/galaxy/4.jpg" ></li>
  <li><img src="images/galaxy/5.jpg" ></li>
  <li><img src="images/galaxy/6.jpg" ></li>
  <li><img src="images/galaxy/7.jpg" ></li>
  <li><img src="images/galaxy/8.jpg" ></li>
  <li><img src="images/galaxy/9.jpg" ></li>
  <li><img src="images/anime/1.jpg" ></li>
  <li><img src="images/anime/2.jpg" ></li>
  <li><img src="images/anime/3.jpg" ></li>
  <li><img src="images/anime/4.jpg" ></li>
  <li><img src="images/anime/5.jpg" ></li>
  <li><img src="images/anime/6.jpg" ></li>
  <li><img src="images/anime/7.jpg" ></li>
  <li><img src="images/anime/8.jpg" ></li>
  <li><img src="images/anime/9.jpg" ></li>
</ul>
<br>
<br>
<br>
<br>
<form action="/updatebackground">
  <input type="text" id="myurl" name="myurl" hidden="hidden">
  <input type="submit" value="设置" style="font-size: 30px">
</form>

</body>
</html>